<template>
  <div>
    经度<a-input v-model="lon"></a-input> 纬度<a-input v-model="lat"></a-input>
    <div :id="currentPageIndex" class="amap-demo">
      <!--<el-amap
      vid="amapDemo1"
      :center="center"
      :zoom="zoom"
      class="amap-demo"
      :events="events"
    >
    </el-amap>-->
    </div>
  </div>
</template>
<script>
var _this = null;
export default {
  mounted() {
    _this = this;
    this.currentPageIndex = "map_demo_" + parseInt(Math.random() * 10000);
    setTimeout(() => {
      _this.initBaiduMap();
    },500);
  },
  props: ["center"],
  data() {
    return {
      zoom: 12,
      lon: 0,
      lat: 0,
      map: {},
      currentPageIndex: "",
    };
  },
  methods: {
    initBaiduMap() {
      var map;
      try{
        map = initMap(this.currentPageIndex);
      }catch(err){
        map = new BMap.Map(this.currentPageIndex)
        map.enableScrollWheelZoom(true);
      }
      
      let self = this;
      //map.setCenter(new BMap.Point(this.center[0], this.center[1]));
      map.addEventListener("click", function (e) {
        self.lon = e.point.lng;
        self.lat = e.point.lat;
      });
      this.map = map;
    },
  },
};
</script>
<style scoped>
.amap-demo {
  height: 400px;
}
</style>